<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>店铺列表</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="list inner_page shop_list">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        <a href="index.html" class="home"></a>
        <form action="" class="pro_search">
            <input type="text" placeholder="五金建材">
            <input type="submit" value="">
        </form>


    </header>


    <section class="main">
        <div class="screen_header">
            <div class="container screen_nav">
                <a href="javascript:void(0);" class="active">热门店铺</a>
                <a href="javascript:void(0);">
                    推荐店铺
                </a>

                <a href="javascript:void(0);">
                    最新入驻
                    <div class="dir">
                        <span class="desc"></span>
                        <span class="asc"></span>
                    </div>
                </a>
                <a href="javascript:void(0);" class="screen_btn">筛选<img src="img/screen.png" alt="筛选"></a>
            </div>

        </div>

        <div class="pro_list">
            <ul>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <li>
                    <div class="container">
                        <div class="pic"><a href="javascript:void(0);"><img src="img/img_shop.jpg" alt=""></a></div>
                        <div class="desc">
                            <h2><a href="javascript:void(0);">上海境大装饰有限公司</a></h2>
                            <p>设计师：12位        效果图：336</p>
                            <p>主营：家具家卫浴配件家卫浴...</p>
                        </div>
                        <a href="javascript:void(0)" class="more"></a>

                    </div>

                </li>
                <div class="clear"></div>
            </ul>

        </div>

        <div class="mask">
            <form class="panel">
                <span>筛选</span>
                <dl>
                    <dt>
                        <h3>设计类型</h3>
                    </dt>
                    <dd>
                        <input type="radio" value="" id="class_1" value="dshzhm" name="type"><label for="class_1">全部</label>
                        <input type="radio" value="" id="class_2" value="chfwy" name="type"><label for="class_2">室内设计</label>
                        <input type="radio" value="" id="class_3" value="wjgj" name="type"><label for="class_3">园林设计</label>
                        <input type="radio" value="" id="class_4" value="wjgj" name="type"><label for="class_4">其他设计</label>
                    </dd>


                    <dt>
                        <h3>设计风格</h3>
                    </dt>
                    <dd>
                        <input type="radio" value="" id="style_1" value="dshzhm" name="style"><label for="style_1">全部</label>
                        <input type="radio" value="" id="style_2" value="chfwy" name="style"><label for="style_2">欧式 </label>
                        <input type="radio" value="" id="style_3" value="wjgj" name="style"><label for="style_3">地中海</label>
                        <input type="radio" value="" id="style_4" value="dgdl" name="style"><label for="style_4">简约</label>
                        <input type="radio" value="" id="style_5" value="zhshcl" name="style"><label for="style_5">欧式</label>
                        <input type="radio" value="" id="style_6" value="lyhs" name="style"><label for="style_6">地中海</label>
                        <input type="radio" value="" id="style_7" value="dshzhm" name="style"><label for="style_7">简约</label>
                        <input type="radio" value="" id="style_8" value="chfwy" name="style"><label for="style_8">欧式 </label>
                        <input type="radio" value="" id="style_9" value="wjgj" name="style"><label for="style_9">地中海</label>
                        <input type="radio" value="" id="style_10" value="dgdl" name="style"><label for="style_10">简约</label>
                        <input type="radio" value="" id="style_11" value="zhshcl" name="style"><label for="style_11">欧式</label>
                        <input type="radio" value="" id="style_12" value="lyhs" name="style"><label for="style_12">地中海</label>
                    </dd>

                </dl>

            </form>
        </div>

    </section>

    <div class="fix_nav">
        <div class="wrapper">
            <ul class="container">
                <li>
                    <a href="index.html" class="home active">
                        首页
                    </a>
                </li>
                <li>
                    <a href="list.html" class="class">
                        分类
                    </a>
                </li>
                <li>
                    <a href="activity.html" class="activity_center">
                        活动中心
                    </a>
                </li>
                <li>
                    <a href="cart.html" class="cart"><span>99</span>
                        购物车
                    </a>
                </li>
                <li>
                    <a href="vip.html" class="mine"><span></span>
                        我的
                    </a>
                </li>
            </ul>

        </div>

    </div>

</body>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        console.log( $(":input"));
        $(":input").change(function(){
            var $this=$(this);
            var $label=$this.next();
            var $parent=$(this).parents("dd");
            var $span=$parent.prev().find("span");
            if($this.is(":checked")){
                console.log($label);
                if($span.html()=="全部"){
                    $span.addClass("red");
                    $span.selected=true;
                    $span.html($label.html());
                }else{
                    console.log("111");
                    $span.html( $span.html()+","+$label.html());

                }

            }else{
                if($parent.find(":checked").length==0){
                    $span.html("全部");
                    $span.removeClass("red");
                    return;
                }else{
                    $span.html("");
                    var str="";
                    $parent.find(":checked").each(function(index){
                        console.log($(this).next().html());
                        str+=","+$(this).next().html();

                    });

                    $span.html(str.substr(1));
                }

            }
        });
    });
</script>
</html>